<template>
  <div class="b-container">
    <h3 class="title">B组件</h3>
    <ul>
      <li>111</li>
      <li>222</li>
    </ul>
  </div>
</template>
<!-- scoped：让样式仅在当前组件生效，不会影响其深层的子孙组件 -->
<style lang="less" scoped>
@color: pink;

.b-container {
  border: 2px solid #ccc;

  .title {
    color: @color;
  }


  ul {
    border: 2px solid pink;

    li {
      padding: 10px;
      color: skyblue;

      // &：引入父选择器
      &:hover {
        background-color: #ccc;
      }

    }
  }

}
</style>